import QtQuick 2.12
import QtQuick.Controls 2.5
import AIClient.module 1.0
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.12

Page {
    id: app_page
    width: parent.width*0.8
    height: parent.height*0.8

    title: qsTr("AI应用")
    anchors.fill: parent

    signal stopApplication(string uid)
    signal createApplication()
    signal getApplication(string uid)
    signal restartApplication(string uid)
    signal updateContent()

    MessageDialog {
        id: stopDialog
        icon: StandardIcon.Question
        modality: Qt.ApplicationModal
        standardButtons: StandardButton.No | StandardButton.Yes
        title: "停止AI应用"
        text: "是否停止AI应用?"
        property string app_id: ""
        onAccepted: {
            console.log("And of course you could only agree.")
        }
        onYes: {
            stopApplication(app_id)
            return
        }
    }

    MessageDialog {
        id: restartDialog
        icon: StandardIcon.Question
        modality: Qt.ApplicationModal
        standardButtons: StandardButton.No | StandardButton.Yes
        title: "重新启动AI应用"
        text: "是否重新启动AI应用?"
        property string app_id: ""
        onAccepted: {
            console.log("And of course you could only agree.")
        }
        onYes: {
            restartApplication(app_id)
            return
        }
    }

    function addItem(item) {
        appModel.append(item)
    }

    function removeAll() {
        appModel.clear()
    }

    function removeItem(item) {
        appModel.remove(item)
    }

    ListModel {
        /* 数据项 */
        id: appModel
        ListElement {
            uid: "uuid";
            name: "red";
            url: "localhost:10000";
            description: "x";
            status: "STOPPED";
            datetime_started: "2020";
            datetime_stopped: "2020";
        }
    }

    ListView {
        id:listView
        model: appModel
        anchors.centerIn: parent
//        width: parent.width*0.8
//        height: parent.height*0.8

//        anchors.bottomMargin: 100
//        anchors.leftMargin: 100
//        anchors.topMargin: 100
//        anchors.rightMargin: 100
        width: app_page.width*0.8
        height: app_page.height*0.8
        header:
            RowLayout {
            spacing: 0
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: 5
                Layout.preferredWidth: 5
                Layout.preferredHeight: 80
//                height: 80
//                width: 120
                color: "azure"
                Text {
                    anchors.centerIn: parent
                    //width: 120
                    text: "id"
                    visible: false
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.1
                Layout.preferredWidth: listView.width*0.1
                Layout.preferredHeight: 80
//                height: 80
//                width: 180
                color: "azure"
                Text {
                    text: "名称"
//                    width: 180
                    anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.2
                Layout.preferredWidth: listView.width*0.2
                Layout.preferredHeight: 80
//                height: 80
//                width: 180
                color: "azure"
                Text {
                    text: "IP"
//                    width: 180
                    anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }

            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.2
                Layout.preferredWidth: listView.width*0.2
                Layout.preferredHeight: 80
//                height: 80
//                width: 200
                color: "azure"
                Text {
                    text: "开始时间"
//                    width: 200
                    anchors.centerIn: parent
                                //anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.2
                Layout.preferredWidth: listView.width*0.2
                Layout.preferredHeight: 80
//                height: 80
//                width: 200
                color: "azure"
                Text {
                    text: "结束时间"
//                    width: 200
                    anchors.centerIn: parent
                                //anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.1
                Layout.preferredWidth: listView.width*0.1
                Layout.preferredHeight: 80
//                height: 80
//                width: 200
                color: "azure"
                Text {
                    text: "状态"
//                    width: 200
                    anchors.centerIn: parent
                                //anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.06
                Layout.preferredWidth: listView.width*0.06
                Layout.preferredHeight: 80
//                height: 80
//                width: 160
                color: "azure"
                Text {
                    text: "操作"
//                    width: 180
                    anchors.centerIn: parent
                                //anchors.centerIn: parent
                    //anchors.fill: parent
                    //anchors.right: parent.right
                    font.pixelSize: Qt.application.font.pixelSize*1.2
                }
            }

            Rectangle{
                Layout.fillWidth: true
                Layout.minimumWidth: listView.width*0.14
                Layout.preferredWidth: listView.width*0.14
                Layout.preferredHeight: 80
                color: "azure"
//                    height: 80
//                    width: 80
                OrangeButton {
                    anchors.centerIn: parent
                    text: "创建AI应用"

//                icon.source:  "/images/images/add.jpeg"
//                icon.height: 80
//                icon.width: 80
//                icon.color: transparent
//                flat: true
                    onClicked: {
                        createApplication()
//                        dataset_create.title = "创建数据集"
//                        dataset_create.m_uid = ""
//                        dataset_create.m_mode = 1
//                        dataset_create.m_dataset_path = ""
//                        dataset_create.m_dataset_name = ""
//                        dataset_create.m_dataset_description = ""
//                        dataset_create.setToken(m_token)
//                        dataset_create.updateMode()
//                        dataset_create.show()
//                        trainjob_create.title = "创建训练"
//                        trainjob_create.setToken(m_token)
//                        trainjob_create.setMode(1)
//                        trainjob_create.updateDataset()
//                        trainjob_create.updateModel()
//                        trainjob_create.show()
//                        trainjob_create.updateMode()

                    }
                }
            }
        }
        delegate: ItemDelegate {
            height: 80
            width: parent.width
            RowLayout {
                spacing: 0
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: 5
                    Layout.preferredWidth: 5
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 120
                    Text {
                        anchors.centerIn: parent
//                        width: 120
                        text: uid
                        visible: false
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.1
                    Layout.preferredWidth: listView.width*0.1
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 180
                    Text {
                        text: name
//                        width: 180
                        anchors.centerIn: parent
                        //anchors.fill: parent
                        //anchors.right: parent.right
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.2
                    Layout.preferredWidth: listView.width*0.2
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 180
                    Text {
                        text: url
//                        width: 180
                        anchors.centerIn: parent
                        //anchors.fill: parent
                        //anchors.right: parent.right
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.2
                    Layout.preferredWidth: listView.width*0.2
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 180
                    Text {
                        text: datetime_started
//                        width: 180
                        anchors.centerIn: parent
                                    //anchors.centerIn: parent
                        //anchors.fill: parent
                        //anchors.right: parent.right
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.2
                    Layout.preferredWidth: listView.width*0.2
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 180
                    Text {
                        text: datetime_stopped
//                        width: 180
                        anchors.centerIn: parent
                                    //anchors.centerIn: parent
                        //anchors.fill: parent
                        //anchors.right: parent.right
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.1
                    Layout.preferredWidth: listView.width*0.1
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 180
                    Text {
                        text: status
//                        width: 180
                        anchors.centerIn: parent
                                    //anchors.centerIn: parent
                        //anchors.fill: parent
                        //anchors.right: parent.right
                        font.pixelSize: Qt.application.font.pixelSize*1.2
                    }
                }
                //}
                Rectangle {

                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.02
                    Layout.preferredWidth: listView.width*0.02
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 80

                    Button {
                        width: parent.width
                        height: parent.width
                        anchors.centerIn: parent
                        ToolTip.delay: 1000
                        ToolTip.timeout: 5000
                        ToolTip.visible: hovered
                        ToolTip.text: qsTr("停止")
                    //anchors.centerIn: parent
                    //text: "delete"
                        background: Image {
                            source: "/images/images/stop.jpeg"
                            anchors.centerIn: parent
                            width: parent.width*0.6
                            height: parent.width*0.6
                            opacity: parent.hovered?0.3:1
                            visible: parent.enabled
                        }

//                    icon.source:  "/images/images/delete.jpg"
//                    icon.height: parent.height*0.7
//                    icon.width: parent.height*0.7
//                    icon.color: transparent
                        flat: true
                        onClicked: {
                            stopDialog.app_id = uid
                            stopDialog.open()
                        }
                        enabled: (status !== "STOPPED")
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.02
                    Layout.preferredWidth: listView.width*0.02
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 80
                    Button {
                        ToolTip.delay: 1000
                        ToolTip.timeout: 5000
                        ToolTip.visible: hovered
                        ToolTip.text: qsTr("查看")
                        width: parent.width
                        height: parent.width
                        anchors.centerIn: parent
                        background: Image {
                            source: "/images/images/view.jpeg"
                            anchors.centerIn: parent
                            width: parent.width*0.6
                            height: parent.width*0.6
                            opacity: parent.hovered?0.3:1
                        }
                        flat: true
                        onClicked: {
                            getApplication(uid)
                        }
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.02
                    Layout.preferredWidth: listView.width*0.02
                    Layout.preferredHeight: 80
                    color: "lightyellow"
//                    height: 80
//                    width: 80

                    Button {
                        ToolTip.delay: 1000
                        ToolTip.timeout: 5000
                        ToolTip.visible: hovered
                        ToolTip.text: qsTr("重新启动")
                        width: parent.width
                        height: parent.width
                        anchors.centerIn: parent
                        background: Image {
                            source: "/images/images/power.jpg"
                            anchors.centerIn: parent
                            width: parent.width*0.6
                            height: parent.width*0.6
                            opacity: parent.hovered?0.3:1
                            visible: parent.enabled
                        }
                        flat: true
                        onClicked: {
                            restartDialog.app_id = uid
                            restartDialog.open()
                        }
                        enabled: (status === "STOPPED")
                    }
                }
                Rectangle {
                    Layout.fillWidth: true
                    Layout.minimumWidth: listView.width*0.14
                    Layout.preferredWidth: listView.width*0.14
                    Layout.preferredHeight: 80
                    color: "lightyellow"
                }
//                MouseArea {
//                    hoverEnabled: true
//                    anchors.fill: parent
//                    onEntered: {

//                    }
//                    onExited: {

//                    }
//                }
            }
            Rectangle {
                anchors.bottom: parent.bottom
                height: 1
                width: parent.width
                color: "black"
            }
            //spacing: 30
            highlighted: false
            hoverEnabled: true
            onClicked:{
                        //listView.currentIndex = index
                console.log("clicked:", uid)
            }
        }
    }
}

